<template>
	<view class="charts">
		<view class="charts__money">
			<view class="charts__title">
				<view class="charts__left">
					<image src="/static/image/benefit/icon_trans_profit.png" mode="" class="charts__tip"></image>
					全部交易额(万元)
				</view>
				<view style="width: 200rpx;" class="charts__tab">
					<!-- <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :show-bar="false"
						active-color="#9D60FF" bg-color="transparent" height="60"></u-tabs> -->
					<u-subsection :list="list" :current="moneySectionCurrent" active-color="#9D60FF" mode="subsection"
						font-size="18" height="60" @change="moneySectionChange"></u-subsection>
				</view>


			</view>
			<qiun-data-charts type="line" :opts="opts" :chartData="tradeChartData" class="charts__column" />
		</view>
		<view class="charts__merchants">
			<view class="charts__title">
				<view class="charts__left">
					<image src="/static/image/benefit/icon_trans_profit.png" mode="" class="charts__tip"></image>
					商户激活数(个)
				</view>
				<view style="width: 200rpx;" class="charts__tab">
					<u-subsection :list="list" :current="activeSectionCurrent" active-color="#9D60FF" mode="subsection"
						font-size="18" height="60" @change="activeSectionChange"></u-subsection>
				</view>


			</view>
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" class="charts__column" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {},
				tradeChartData: {},
				opts: {
					color: ["#9D60FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "solid"
						}
					}
				},
				list: [{
					name: '近7天'
				}, {
					name: '半年'
				}],
				moneySectionCurrent: 0,
				activeSectionCurrent: 0,
				current: 0,
				data: {
					"trendType": 1
				},
				activeData: {
					"trendType": 1
				}
			}
		},
		onLoad() {

		},
		mounted() {
			this.getServerData();
			this.getActiveData();
		},
		methods: {
			moneySectionChange(index) {
				this.moneySectionCurrent = index;

				this.data.trendType = index + 1;
				this.getServerData();

			},
			activeSectionChange(index) {
				this.activeSectionCurrent = index;
				this.activeData.trendType = index + 1;
				this.getActiveData();

			},
			change(index) {
				this.current = index;
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				let categories = [],
					series = [];
				const _let = this;
				this.$zx.order_api.getOrderList(this.data).then((data) => {

					data.forEach(function(item, index, array) {
						categories.push(item.date);
						series.push(item.amount);
						console.log("data=" + JSON.stringify(data))
						let res = {
							categories: categories,
							series: [{
								name: "交易额",
								data: series
							}]
						};
						_let.tradeChartData = JSON.parse(JSON.stringify(res));
					});
				});

			},
			getActiveData() {
				//模拟从服务器获取数据时的延时
				let categories = [],
					series = [];
				const _let = this;
				this.$zx.order_api.merchantActiveTrend(this.activeData).then((data) => {

					data.forEach(function(item, index, array) {
						categories.push(item.date);
						series.push(item.total);
						console.log("data=" + JSON.stringify(data))
						let res = {
							categories: categories,
							series: [{
								name: "激活数",
								data: series
							}]
						};
						_let.chartData = JSON.parse(JSON.stringify(res));
					});
				});

			},

		}
	}
</script>

<style scoped lang="scss">
	.charts {
		width: 100%;
		height: 300px;


		&__title {
			display: flex;
			padding: 15rpx;
			align-items: center;
		}

		&__tip {
			width: 30rpx;
			height: 30rpx;
		}

		&__left {
			flex: 2;
		}

		&__tab {}

		&__column {
			background-color: white;
		}

		&__merchants {
			padding-bottom: 150rpx;
		}
	}
</style>